<template>
  <div class="transmit">
    <h1>穿梭框</h1>
    <div class="transmitBox">
      <Team>
        <Item v-for="item in leftList" :key="item.id" :id="item.id" :title="item.title" :time="item.time" btnTxt="添加" @changeList="changeListLeft" />
      </Team>
      <Team>
        <Item v-for="item in rightList" :key="item.id" :id="item.id" :title="item.title" :time="item.time" btnTxt="删除" @changeList="changeListRight" />
      </Team>
    </div>
  </div>
</template>

<script>
import Team from "./Team.vue";
import Item from "./Item.vue";
export default {
  components:{
    Team, Item
  },
  data(){
    return {
      leftList:[{
        id: "yrg8g4y",
        title: "张三",
        time: '2023-10-16'
      },{
        id: "asfdfgh",
        title: "李四",
        time: '2023-10-18'
      },{
        id: "wvb34ig59",
        title: "王二",
        time: '2023-10-20'
      }],
      rightList:[]
    }
  },
  methods:{
    changeListLeft(id){
      // 左侧按钮的功能：根据点击按钮的id，在左侧数组中删除该数据，并添加到右侧数组中
      const i = this.getIndex(this.leftList, id);
      this.rightList.push(...this.leftList.splice(i, 1))
    },
    changeListRight(id){
      // 右侧按钮的功能：根据点击按钮的id，在右侧数组中删除该数据，并添加到左侧数组中
      const i = this.getIndex(this.rightList, id);
      this.leftList.push(...this.rightList.splice(i, 1))
    },
    getIndex(data, id){
      // 根据id获取指定数组中数据的索引
      let i = 0;
      data.some((val,idx)=>{
        i = idx;
        return val.id === id;
      })
      return i;
    }
  }
}
</script>

<style>
.transmitBox{
  overflow: hidden;
  width: 680px;
}  
</style>